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Introduction 


Team Fortress 2 

Distinctive Silhouettes 
Stylized shading 

Left 4 Dead 

Creating a Dark, Gritty Horror experience 
Applying lessons learned fromTF2 
Utilizing "Filmic" effects 
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Initial Team Fortress 2 
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Why The Unique Visual Style? 


Gameplay 

Readability 

Branding 
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Read Hierarchy 

Team - Friend or Foe? H 

Color 

Class - Run or Attack? H 

Dstinctive silhouettes 
Body proportions 

Weapons Color Swatch 

Shoes, hats and clothing folds 

Selected weapon - What's he packin'? 

Highest contrast at chest level, where weapon is held 
Gradient from dark feet to light chest 






Early 20th Century Commercial Illustration 





Dean Cornwell 


Norman Rockwell 









J .C. Leyendecker 
Thanksgiving 1628-1928 


J .C. Leyendecker 
Tally-Ho, 1930 


















J. C. Leyendecker 
Arrow collar advertisement, 1929 



J .C. Leyendecker 
Swimmin' Hole, 1935 























Character Creation 


Character si I houette 

Interior shapes 

Model sheet 

3D Model 

Character Ski n 

Fi nal Character i n game 
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Character Si I houette 


Building block of 
character design 

Identifiable at first read 
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Interior Shapes 

Sol vi ng i nteri or 
character design with 
shadow shapes 

Keep it iconic 

Work out desi gn i n 
three quarter pose 
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Model Sheet 


Use concept painting 
as guide 

Solve design 
probl ems usi ng 
silhouette only 

Sol ve i nteri or desi gn 
with shadow shapes 
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3D Model 


Match si I houette to 
model sheet 

Solve 3 quarter 
design with 
screenshots / 
pai ntovers 

Model with character 
in mind 
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Base Ambient Occlusion map 











Character Ski n 
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Final Character 


3D model with 
texture and basic 
shading 
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Engineer model 
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Pyro Concept 
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Pyro model 
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Envi ronment 


Creating a compelling, 
i mmersi ve worl d 


Team distinction 
through material 
hue/ val ue/ saturation 

Desaturated relative to 
pi ayers 


Impressionistic painter 


look 
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Contrasting Team Properties 

Red 

Warm colors 
Natural materials 
Angular geometry 



Bl ue 

Cool colors 
Industrial materials 
Orthogonal forms 



Concept paintings 






































Miyazaki - Brush Width Foreshortened 



Can easily imagine a 3D 
camera move between these 
2D views of the same space 
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World texturing 



Texture map 



I n-game Screenshot 
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World texturing 




























World texturing 



4 I 



I n-game Screenshot 
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Introduction 

Co-op, first-person horror 
game 

Dynamic shared narrative 

Experience an action movie 
with friends 

Al Di rector 

Procedural I y generated 
character performance, 
pacing, effects and music 

Shi pped today! 

(PI ease stay i n your seats) 
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We Shipped Today! 

Because of Steam, there is an exact 
moment when the PC version of a Valve 
game officially ships. 

Hitting enter on a keyboard in one guy's 
office wasn't momentous enough for us, 
so we built The Shipping l^bchine 


I was here in Montreal, so I missed the 
party, but here are a few fun photos... 
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Art Di recti on and Gameplay 


Dark, scary cinematic 
envi ronment 

Apply lessons learned 
from TF2 

"Filmic" Effects 

Shaders enhance dark 
setting 
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Filmic effects 

Color Correction 
Grain 
Vi gnette 

Local Contrast Enhancement 
Dynamically communicate game state 
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Grain 















Grain 
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Vignette 
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Local Contrast 
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Filmic, Effects 
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Lighting for Darkness 

Support fiction 

Fires 

Headlights of abandoned vehicles 

Aid navigation 

Players tend to follow the light 

I mportance of si I houette 

Player as light source 

Flashlight tied to gameplay 
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Early production screenshot 






In-game headlights 
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Smoking the Set 

Separate foreground from background 

Fog 

Light colored fog in dark areas to contrast with 
si I houettes of infected in mid-ground 

Particles 

Adds atmosphere and helps accentuate silhouettes 
of infected against lighter particles 
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Black Fog 


Light Fog 






Without particles 


With particles 
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Reload, Shove & Muzzle Flash 

Player is the light source 
Increases drama and immersion 
Flashlight is attached to the weapons 

Reloading 
Shovi ng 
Muzzle flash 

Encourages players to coordinate actions 
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Traditional Normal Mapping 


Traditional normal 
mapping locally alters 
surface orientation, 
causi ng detai I ed 
lighting effects 



M t 1 

^ — Light 

y. Inten: 

Narrow dark area T 
from normal facing — 
away from the light 
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Self Shadowed Normal Mapping 


Self Shadowed Normal 
Mapping incorporates 
local self-shadowing 
information for greater 
surface richness 




Reacts to lighting from 
radiosity as well as 
dynamic lights in the 
scene, such as the 
pi ayer' s f I ashl i ght 

Refactori ng our shader 
code, this turns out to 
be free 



Narrow dark area 
from normal facing 
away from the light 



Light 

Intensity 


Self-Shadowed 

Region 
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Self Shadowed Normal Mapping Example 



No Self-shadowing With Self-shadowing 





Wet Environments 


Film technique 

Wash down the set 
to get that "movie 
dark" look 

Film Noir 

Adds details to dark 
settings while still 
feel i ng dark 
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Summary 


Team Fortress 2 

Distinctive Silhouettes 
Stylized shading 

Left 4 Dead 

Creating a Dark, Gritty Horror experience 
Applying lessons learned fromTF2 
Utilizing "Filmic" effects 
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